<!-- 模板 -->
<template>
  <div class="advertisement">
      <div class=" box">
          <div class="btn">
            <!-- <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button> -->
          </div>
          <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column type="index" label="序号" align="center"> </el-table-column>
            <el-table-column  label="图片" align="center" >
              <template slot-scope="scope">
                  <el-image  style="width: 120px;" :src="scope.row.picUrl"  :preview-src-list="[scope.row.picUrl]"> </el-image>
              </template>
            <!-- <template slot-scope="scope">
              <img :src="showUrl+scope.row.picUrl" alt="" width="180">
            </template> -->
          </el-table-column>
          <el-table-column prop="content" label="跳转位置" align="center" > </el-table-column>
            <el-table-column  label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <!-- <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" >删除</el-button> -->
                </template>
            </el-table-column>
          </el-table>
        </el-card>
         <!-- <pagination
        v-show="newsTotal >0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getList"
        /> -->
      </div>
      <!-- 添加弹窗 -->
      <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="35%"
  :close-on-click-modal='false'>
<el-form :label-position="labelPosition" label-width="120px" :model="form" :rules="rules" ref="form">
            <el-form-item label="大图" prop="picUrl">
                <el-upload
                :headers='headers'
                class="avatar-uploader"
                :action="upImage+'/table/upload'"
                :on-success="handleAvatarSuccess"
                :show-file-list="false"
                >
                <img v-if="form.picUrl" :src=" form.picUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="跳转位置" >
                <!-- <el-select v-model="form.jumpUrl" placeholder="请选择" @change="changePlace">
                    <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select> -->
                <el-input v-model="form.content" ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
import { getBannerList,getBannerAdd, getBannerUpdate,getBannerDes,geBannertDet} from "@/api/home/index";

import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        tableData:[],
        dialogVisible:false,
        loading:false,
        title:"",
        labelPosition: 'right',
        params: {
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal:0,
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        form:{
          tyep:3,
        //   name:'',
        },
        options: [{
          value: 1,
          label: '显示',
        }, {
          value: 0,
          label: '不显示'
        }],
        options1:[],
        rules:{
           picUrl:[
             { required: true, message: '请添加图片', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请输入跳转的位置', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
        },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
      // 删除
    handleDeleteClick(row){
      const id = row.id;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return geBannertDet(id);
        })
        .then(() => {
          this.getList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    //   修改按钮
    handleUpdateClick(row){
        this.title = '修改'
        this.form = row
        this.dialogVisible = true
    },
       // 获取所有
    getList() {
      this.loading = true;
      let a = []
      this.tableData = []
      getBannerList(this.params).then(res => {
        // console.log(res);
        a = res.rows
        for (let i = 0; i< a.length; i++) {
         if(a[i].type == 3){
           this.tableData.push(a[i])
         }
        }
        // this.tableData = res.rows;
        this.newsTotal = this.tableData.length;
        this.loading = false;
      });
    },
      onSubmit(){
         this.$refs["form"].validate(valid => {
           if(valid){
                if (this.form.id != undefined) {
                        getBannerUpdate(this.form).then(res=>{
                            if(res.code == 200){
                                this.$message.success('编辑成功')
                                this.dialogVisible = false
                                this.getList()
                            }
                        })
                      } else {
                        getBannerAdd(this.form).then(res=>{
                            if(res.code == 200){
                                this.$message.success('新增成功')
                                this.dialogVisible = false
                                this.getList()
                            }
                        })
                      } 
         }
      });
       
          
      },
      handleAvatarSuccess(res, file) {
      // console.log(URL.createObjectURL(file.raw));
      this.form.picUrl ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
      handleClose(){
          this.dialogVisible = false
      },
      // add(){
      //     if(this.tableData.length == 1){
      //       this.$message.warning("最多一个广告位");
      //     }else{
      //       this.title = '添加'
      //       this.form = {
      //               picUrl:'',
      //               status:this.options[0].value,
      //               name:'',
      //               type:3
      //           }
      //       this.dialogVisible = true
      //     }
          
      // },
  },
  created () {
      this.getList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin: 10px;
    }
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

</style>
